<template>
    <div>
        <el-dialog :title="state.dialog.title" v-model="state.dialog.visible" width="500px" append-to-body>
            <el-form ref="stepRecordFormRef" :model="form" :rules="rules" label-width="80px">
                        <el-form-item label="关联ID" prop="actionId">
                            <el-input v-model="form.actionId" placeholder="请输入关联ID" />
                        </el-form-item>
                        <el-form-item label="阶段步骤ID" prop="stepId">
                            <el-input v-model="form.stepId" placeholder="请输入阶段步骤ID" />
                        </el-form-item>
                        <el-form-item label="审批人ID" prop="checkUid">
                            <el-input v-model="form.checkUid" placeholder="请输入审批人ID" />
                        </el-form-item>
                        <el-form-item label="审批时间" prop="checkTime">
                            <el-input v-model="form.checkTime" placeholder="请输入审批时间" />
                        </el-form-item>
                        <el-form-item label="审核意见">
                            <editor v-model="form.content" :min-height="192"/>
                        </el-form-item>
                        <el-form-item label="删除时间" prop="deleteTime">
                            <el-input v-model="form.deleteTime" placeholder="请输入删除时间" />
                        </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="state.buttonLoading" :disabled ="state.buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup name="StepRecordAdd" lang="ts">
    import {nextTick, reactive, ref, toRefs} from "vue";
    import { ElForm, ElMessage} from "element-plus";
    import { getStepRecord, addStepRecord, updateStepRecord } from '@/leadmall/api/stepRecord';
    import { StepRecordVO, StepRecordForm } from '@/leadmall/api/stepRecord/types';

    const stepRecordFormRef = ref(ElForm as any);
    const state = reactive({
        form: {} as any,
        rules:{},
        buttonLoading:false,
        dialog:{
            visible: false,
            title: ''
        }
    });
    const {form ,rules} = toRefs(state);
    const emit = defineEmits(["refresh"]);
    /** 表单重置 */
    const reset = () => {
        form.value = Object.assign({},initFormData);
            stepRecordFormRef.value = {};
    }

    const initDialog = (type: string,row?: StepRecordVO) => {
        if(type==="add"){
            state.dialog.title = "添加服务";
            nextTick(() => {
                reset();
            });
        }else{
            state.dialog.title = "修改【请填写功能名称】";
            nextTick(async () => {
                reset();
                const _id = row?.id as number;
                const res = await getStepRecord(_id);
                Object.assign(form.value, res.data);
            });
        }
    };
    const openDialog = async (type: string, row: StepRecordVO) => {
        initDialog(type, row);
        state.dialog.visible = true;
    };
    defineExpose({
        openDialog
    });
    const cancel = () => {
        state.dialog.visible = false;
        emit("refresh"); /* 刷新表格 */
    }
    /** 提交按钮 */
    const submitForm = () => {
        state.buttonLoading = true;
            stepRecordFormRef.value.validate(async (valid: boolean) => {
            if (valid) {
                let res;
                let message;
                if (form.value.id) {
                    res = await updateStepRecord(form.value)
                    message = "修改成功"
                } else {
                    res = await addStepRecord(form.value)
                    message = "新增成功";
                }
                if (res.code === 200) {
                    ElMessage.success(message);
                    cancel();
                }else{
                    ElMessage.error(res.msg);
                }
            }
        });
        state.buttonLoading = false
    }
    const initFormData: StepRecordForm = {
                        id: undefined,
                        actionId: undefined,
                        stepId: undefined,
                        checkUid: undefined,
                        checkTime: undefined,
                        status: undefined,
                        type: undefined,
                        content: undefined,
                        deleteTime: undefined
    }
</script>
